<template>
  <div class="container" :style="{ backgroundImage: bg }">
    <!--对话框 start-->
    <div>
      <!--添加-->
      <el-dialog
          draggable
          destroy-on-close
          v-model="dialogAddVisible"
          title="添加"
          width="70%"
          center
      >
        <el-form inline :model="addFormInfo" label-width="150px">
          <el-form-item label="头图">
            <el-upload list-type="picture-card"
                       :action="dataStore.fastdfsUploadUrl"
                       :on-success="onHeadImageAddSuccess"
                       :on-remove="onHeadImageAddRemove">
              <el-image :src="addFormInfo.categoryPic"/>
            </el-upload>
          </el-form-item>
          <el-form-item label="报修照片">
            <el-input v-model="addFormInfo.repairReportImage"></el-input>
          </el-form-item>
          <el-form-item label="报修内容">
            <el-input type="textarea" rows="6" style="width: 800px" v-model="addFormInfo.repairReportContent"></el-input>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-input v-model="addFormInfo.repairReportSubmitTime"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="width: 300px">
            <el-select v-model="addFormInfo.repairReportStatus" placeholder="请选择状态">
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="已接单" value="已接单"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接单时间">
            <el-input v-model="addFormInfo.repairReportAcceptTime"></el-input>
          </el-form-item>
          <el-form-item label="预期到达时间">
            <el-input v-model="addFormInfo.repairReportExpectedArrival"></el-input>
          </el-form-item>
          <el-form-item label="完成时间">
            <el-input v-model="addFormInfo.repairReportFinishTime"></el-input>
          </el-form-item>
          <el-form-item label="学生" style="width: 300px">
            <el-select v-model="addFormInfo.studentId">
              <el-option v-for="item in studentList.list" :key="item.userId"
                         :label="item.nickname"
                         :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维修员" style="width: 300px">
            <el-select v-model="addFormInfo.maintainerId">
              <el-option v-for="item in maintainerList.list" :key="item.userId"
                         :label="item.nickname"
                         :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogAddVisible = false">取消</el-button>
            <el-button type="primary" @click="sureHandler">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <!--编辑-->
      <el-dialog
          draggable
          destroy-on-close
          v-model="dialogEditorVisible"
          title="编辑"
          width="70%"
          center
      >
        <el-form inline :model="editorFormInfo" label-width="150px">
          <el-form-item label="头图">
            <el-upload list-type="picture-card"
                       :action="dataStore.fastdfsUploadUrl"
                       :on-success="onHeadImageEditSuccess"
            >
              <el-image  :src="editorFormInfo.goodsHeadImg" />

            </el-upload>
          </el-form-item>
          <el-form-item label="报修照片">
            <el-input v-model="editorFormInfo.repairReportImage"></el-input>
          </el-form-item>
          <el-form-item label="报修内容">
            <el-input type="textarea" rows="6" style="width: 800px" v-model="editorFormInfo.repairReportContent"></el-input>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-input v-model="editorFormInfo.repairReportSubmitTime"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="width: 300px">
            <el-select v-model="editorFormInfo.repairReportStatus" placeholder="请选择状态">
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="已接单" value="已接单"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接单时间">
            <el-input v-model="editorFormInfo.repairReportAcceptTime"></el-input>
          </el-form-item>
          <el-form-item label="预期到达时间">
            <el-input v-model="editorFormInfo.repairReportExpectedArrival"></el-input>
          </el-form-item>
          <el-form-item label="完成时间">
            <el-input v-model="editorFormInfo.repairReportFinishTime"></el-input>
          </el-form-item>
          <el-form-item label="学生" style="width: 300px">
            <el-select v-model="editorFormInfo.studentId">
              <el-option v-for="item in studentList.list" :key="item.userId"
                         :label="item.nickname"
                         :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维修员" style="width: 300px">
            <el-select v-model="editorFormInfo.maintainerId">
              <el-option v-for="item in maintainerList.list" :key="item.userId"
                         :label="item.nickname"
                         :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogEditorVisible = false">取消</el-button>
            <el-button type="primary" @click="sureEditorHandler">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!--对话框 end-->

    <!--顶部 start-->
    <div class="header" v-if="headerShow">
      <div class="search">
        <el-input
            class="input"
            size="large"
            @keyup.enter="searchHandle"
            v-model="searchInfo"
            placeholder="请输入关键字"
        ></el-input>
        <el-button icon="Search" size="large" @click="searchHandle" color="#3c8dbc">搜索</el-button>
      </div>
    </div>
    <!--顶部 end-->

    <!--表格 start-->
    <div class="table-container">
      <div class="table-header">
        <div class="button-list">
          <el-button icon="DocumentAdd" type="success" @click="addHander">新增</el-button>
        </div>
        <div class="icon-list">
          <el-button icon="search" color="#3c8dbc" @click="headerShow?headerShow=false:headerShow=true"></el-button>
          <el-button icon="RefreshRight" color="#269846" @click="reload"></el-button>
          <el-button icon="ArrowLeftBold" color="#133c9a" @click="onClickLeft"></el-button>
        </div>
      </div>
      <el-table class="table" :data="dataList.list" highlight-current-row height="400">
        <el-table-column label="报修照片" prop="repairReportImage" align="center">
          <template #default="scope">
            <img :src="scope.row.repairReportImage" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="报修内容" prop="repairReportContent"
                         align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="提交时间" prop="repairReportSubmitTime"
                         align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="状态" prop="repairReportStatus" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="接单时间" prop="repairReportAcceptTime"
                         align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="预期到达时间" prop="repairReportExpectedArrival"
                         align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="完成时间" prop="repairReportFinishTime"
                         align="center"></el-table-column>
        <el-table-column label="学生" prop="studentId" align="center">
          <template #default="scope">
                  <span v-for="item in studentList.list" :key="item.userId">
                      {{ scope.row.studentId == item.userId ? item.nickname : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column label="维修员" prop="maintainerId" align="center">
          <template #default="scope">
                  <span v-for="item in maintainerList.list" :key="item.userId">
                      {{ scope.row.maintainerId == item.userId ? item.nickname : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small"  type="success"
                       @click="router.push('/repair/repairAppeal/'+scope.row.repairReportId)">维修申诉
            </el-button>
            <el-button size="small"  type="warning"
                       @click="router.push('/repair/repairEvaluation/'+scope.row.repairReportId)">维修评价
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          layout="prev,pager,next,jumper"
          :default-page-size="defaultPageSize"
          :total="totalData"
          @current-change="currentChangeHaddler"
      ></el-pagination>
    </div>
    <!--表格 end-->

    <!--底部 start-->
    <div class="bottom">
      <span>© 2025 YueMu Copyrigh</span>
    </div>
    <!--底部 end-->
  </div>
</template>

<script setup>
import repairAxios from "@/api/repair.js"
import userAxios from "@/api/user.js"
import {onMounted, reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore.js"
const dataStore = useDataStore()
import sysAxios from '@/api/sys.js'
const router = useRouter()
// 顶部显示
const headerShow = ref(true);

/**
 * 返回
 */
const onClickLeft = () => {
  history.back();
};

/**
 * 刷新页面
 */
const reload = () => {
  location.reload();
};

// 初始化分页查询数据
const dataList = reactive({
  list: [],
});
const studentList = reactive({
  list: [],
});
const maintainerList = reactive({
  list: [],
});

// 初始化总条数
const totalData = ref(0);

// 当前页
const currentPage = ref(1);

// 初始化分页显示条数
const defaultPageSize = ref(10);

// 搜索初始化状态
const searchInfo = ref("");

// 添加对话框控制器
const dialogAddVisible = ref(false);

// 初始化添加对话框状态
const addFormInfo = reactive({
  repairReportImage: "",
  repairReportContent: "",
  repairReportSubmitTime: "",
  repairReportStatus: "",
  repairReportAcceptTime: "",
  repairReportExpectedArrival: "",
  repairReportFinishTime: "",
  studentId: "",
  maintainerId: "",
});

// 编辑对话框控制器
const dialogEditorVisible = ref(false);

// 初始化编辑对话框状态
const editorFormInfo = reactive({
  repairReportId: "",
  repairReportImage: "",
  repairReportContent: "",
  repairReportSubmitTime: "",
  repairReportStatus: "",
  repairReportAcceptTime: "",
  repairReportExpectedArrival: "",
  repairReportFinishTime: "",
  studentId: "",
  maintainerId: "",
});

/**
 * 网络请求：分页查询
 */
const http = () => {
  repairAxios.repairReport_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value,
  }).then((res) => {
    if (res.data.code === 200) {
      dataList.list = res.data.data.records;
      totalData.value = res.data.data.total;
    } else {
      ElMessage.error(res.data.message);
    }
  });
};

onMounted(() => {
  http();
  userAxios.user_findAllStudent().then((res) => {
    if (res.data.code === 200) {
      studentList.list = res.data.data;
    }
  })
  userAxios.user_findAllMaintainer().then((res) => {
    if (res.data.code === 200) {
      maintainerList.list = res.data.data;
    }
  })
});

/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  currentPage.value = nowPage;
  http();
};

/**
 * 搜索按钮
 */
const searchHandle = () => {
  http();
};

/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true;
};
/**
 * 上传成功的钩子
 */
const onHeadImageAddSuccess=(response, uploadFile)=>{
  addFormInfo.repairReportImage=response.data
  ElMessage.success("上传成功")
}
/**
 * 移除图片的钩子
 */
const onHeadImageAddRemove=(response, uploadFile)=>{
  sysAxios.fastdfs_delete({
    filePath: addFormInfo.repairReportImage
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}

/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  repairAxios.repairReport_add({
    repairReportImage: addFormInfo.repairReportImage,
    repairReportContent: addFormInfo.repairReportContent,
    repairReportSubmitTime: addFormInfo.repairReportSubmitTime,
    repairReportStatus: addFormInfo.repairReportStatus,
    repairReportAcceptTime: addFormInfo.repairReportAcceptTime,
    repairReportExpectedArrival: addFormInfo.repairReportExpectedArrival,
    repairReportFinishTime: addFormInfo.repairReportFinishTime,
    studentId: addFormInfo.studentId,
    maintainerId: addFormInfo.maintainerId,
  }).then((res) => {
    if (res.data.code === 200) {
      dialogAddVisible.value = false;
      http();
    } else {
      ElMessage.error(res.data.message);
    }
  });
};

/**
 * 编辑对话框 弹出事件
 */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true;
  repairAxios.repairReport_findById({
    repairReportId: row.repairReportId,
  }).then((res) => {
    if (res.data.code === 200) {
      editorFormInfo.repairReportId = res.data.data.repairReportId;
      editorFormInfo.repairReportImage = res.data.data.repairReportImage;
      editorFormInfo.repairReportContent = res.data.data.repairReportContent;
      editorFormInfo.repairReportSubmitTime = res.data.data.repairReportSubmitTime;
      editorFormInfo.repairReportStatus = res.data.data.repairReportStatus;
      editorFormInfo.repairReportAcceptTime = res.data.data.repairReportAcceptTime;
      editorFormInfo.repairReportExpectedArrival = res.data.data.repairReportExpectedArrival;
      editorFormInfo.repairReportFinishTime = res.data.data.repairReportFinishTime;
      editorFormInfo.studentId = res.data.data.studentId;
      editorFormInfo.maintainerId = res.data.data.maintainerId;
    } else {
      ElMessage.error(res.data.data.message);
    }
  });
};
/**
 * 封面上传成功的钩子
 */
const onHeadImageEditSuccess = (response, uploadFile) => {
  //删除以前图片
  sysAxios.fastdfs_delete({
    filePath: editorFormInfo.repairReportImage
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("fastdfs移除原图片成功")
    }
  })
  //替换为现在的图片
  editorFormInfo.repairReportImage = response.data
  ElMessage.success("上传成功")

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  repairAxios.repairReport_update({
    repairReportId: editorFormInfo.repairReportId,
    repairReportImage: editorFormInfo.repairReportImage,
    repairReportContent: editorFormInfo.repairReportContent,
    repairReportSubmitTime: editorFormInfo.repairReportSubmitTime,
    repairReportStatus: editorFormInfo.repairReportStatus,
    repairReportAcceptTime: editorFormInfo.repairReportAcceptTime,
    repairReportExpectedArrival: editorFormInfo.repairReportExpectedArrival,
    repairReportFinishTime: editorFormInfo.repairReportFinishTime,
    studentId: editorFormInfo.studentId,
    maintainerId: editorFormInfo.maintainerId,
  }).then((res) => {
    if (res.data.code === 200) {
      dialogEditorVisible.value = false;
      http();
    } else {
      ElMessage.error(res.data.message);
    }
  });
};

/**
 * 删除
 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm("确定删除么", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    repairAxios.repairReport_delete({
      repairReportId: row.repairReportId,
    }).then((res) => {
      if (res.data.code === 200) {
        ElMessage({
          type: "success",
          message: "删除成功！！！",
        });
        http();
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
    });
  }).catch((error) => {
    ElMessage({
      type: "info",
      message: "取消删除",
    });
  });
};
</script>

<style scoped lang="scss">
.container {
  padding-top: 20px;
  background-size: cover;
}

.header {
  background-color: #ffffff;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;

  .search {
    width: 100%;

    .input {
      width: 45%;
    }
  }
}

.table-container {
  background-color: #ffffff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  .table-header {
    display: flex;

    .button-list {
      color: #ffffff;
    }

    .icon-list {
      position: fixed;
      right: 30px;
    }
  }

  .table {
    margin: 10px;
    width: 97%;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 20px;
  background-color: #ffffff;
  width: 100%;
  padding: 10px;

  span {
    position: fixed;
    right: 20px;
    cursor: pointer;
  }
}
</style>
